<template>
  <div>
    <div v-if="detailTableData.length" class="table_scroll_wrapper">
      <div v-show="isModelOne">
        <stock-list
          :list="detailTableData"
          stockTag="heavy"
          unit="rem"
          fixed="left"
          :expand="false"
          :fixedHead="false"
          @headSort="watchHeadSort"
          @clickRow="watchClickRow"
        >
          <stock-list-item
            prop="stockCode"
            label="股票名称"
            label-width="1.7rem"
            label-align="left"
          >
            <tempalte v-slot="scope">
              <div class="stock_detail_template">
                <div v-if="scope.stockName">{{ scope.stockName }}</div>
                <div v-else>--</div>
                <div>{{ scope.stockCode }}</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="nowPrice"
            label="现价"
            sortable="true"
            label-width="1.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.upDownPercent > 0" class="up_data">
                  {{ scope.nowPrice }}
                </div>
                <div v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0" class="zero_data">
                  {{ scope.nowPrice }}
                </div>
                <div v-else-if="scope.nowPrice === '' || scope.nowPrice === -9999">--</div>
                <div v-else class="down_data">
                  {{ scope.nowPrice }}
                </div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="upDownPercent"
            label="涨幅"
            label-width="1.4rem"
            sortable="false"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.upDownPercent > 0" class="up_data">{{ scope.upDownPercent }}%</div>
                <div
                  v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                  class="zero_data"
                >
                  {{ scope.upDownPercent }}%
                </div>
                <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
                <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="highestProfit"
            label="最高涨幅"
            sortable="true"
            label-width="1.6rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.highestProfit > 0" class="up_data">{{ scope.highestProfit }}%</div>
                <div
                  v-else-if="scope.highestProfit && Number(scope.highestProfit) === 0"
                  class="zero_data"
                >
                  {{ parseFloat(scope.highestProfit).toFixed(2) }}%
                </div>
                <div v-else-if="!scope.highestProfit || scope.highestProfit === ''">--</div>
                <div v-else class="down_data">{{ scope.highestProfit }}%</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="rangeProfit"
            label="区间涨幅"
            sortable="true"
            label-width="1.8rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.rangeProfit > 0" class="up_data">{{ scope.rangeProfit }}%</div>
                <div
                  v-else-if="scope.rangeProfit && Number(scope.rangeProfit) === 0"
                  class="zero_data"
                >
                  {{ parseFloat(scope.rangeProfit).toFixed(2) }}%
                </div>
                <div v-else-if="!scope.rangeProfit || scope.rangeProfit === ''">--</div>
                <div v-else class="down_data">{{ scope.rangeProfit }}%</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="addDate"
            label="入池时间"
            sortable="true"
            label-width="2.2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.addDate">
                  {{ scope.addDate }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="buyPrice"
            label="入池价格"
            sortable="true"
            label-width="1.6rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.buyPrice">
                  {{ scope.buyPrice }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="industry"
            label="所属行业"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.industry">
                  {{ scope.industry }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item prop="status" label="状态" label-align="right" label-width="1.2rem">
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.status">
                  {{ scope.status }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
        </stock-list>
      </div>
      <div v-show="isModelTwo">
        <stock-list
          :list="detailTableData"
          stockTag="heavy"
          unit="rem"
          fixed="left"
          :expand="false"
          :fixedHead="false"
          @headSort="watchHeadSort"
          @clickRow="watchClickRow"
        >
          <stock-list-item
            prop="stockCode"
            label="股票名称"
            label-width="1.7rem"
            label-align="left"
          >
            <tempalte v-slot="scope">
              <div class="stock_detail_template">
                <div v-if="scope.stockName">{{ scope.stockName }}</div>
                <div v-else>--</div>
                <div>{{ scope.stockCode }}</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="nowPrice"
            label="现价"
            sortable="true"
            label-width="1.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.upDownPercent > 0" class="up_data">
                  {{ scope.nowPrice }}
                </div>
                <div v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0" class="zero_data">
                  {{ scope.nowPrice }}
                </div>
                <div v-else-if="scope.nowPrice === '' || scope.nowPrice === -9999">--</div>
                <div v-else class="down_data">
                  {{ scope.nowPrice }}
                </div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="upDownPercent"
            label="涨幅"
            label-width="1.4rem"
            sortable="false"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.upDownPercent > 0" class="up_data">{{ scope.upDownPercent }}%</div>
                <div
                  v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                  class="zero_data"
                >
                  {{ scope.upDownPercent }}%
                </div>
                <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
                <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="highestProfit"
            label="最高涨幅"
            sortable="true"
            label-width="1.6rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.highestProfit > 0" class="up_data">{{ scope.highestProfit }}%</div>
                <div
                  v-else-if="scope.highestProfit && Number(scope.highestProfit) === 0"
                  class="zero_data"
                >
                  {{ parseFloat(scope.highestProfit).toFixed(2) }}%
                </div>
                <div v-else-if="!scope.highestProfit || scope.highestProfit === ''">--</div>
                <div v-else class="down_data">{{ scope.highestProfit }}%</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- <stock-list-item
            prop="rangeProfit"
            label="区间涨幅"
            sortable="true"
            label-width="1.8rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.rangeProfit > 0" class="up_data">{{ scope.rangeProfit }}%</div>
                <div
                  v-else-if="scope.rangeProfit && Number(scope.rangeProfit) === 0"
                  class="zero_data"
                >
                  {{ parseFloat(scope.rangeProfit).toFixed(2) }}%
                </div>
                <div v-else-if="!scope.rangeProfit || scope.rangeProfit === ''">--</div>
                <div v-else class="down_data">{{ scope.rangeProfit }}%</div>
              </div>
            </tempalte>
          </stock-list-item> -->
          <stock-list-item
            prop="addDate"
            label="入池时间"
            sortable="true"
            label-width="2.2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.addDate">
                  {{ scope.addDate }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="buyPrice"
            label="入池价格"
            sortable="true"
            label-width="1.6rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.buyPrice">
                  {{ scope.buyPrice }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item prop="turnOver" label="成交额" label-width="1.8rem" label-align="right">
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.turnOver">
                  {{ scope.turnOver }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="largeAmount"
            label="大单净量"
            label-width="2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.largeAmount">
                  {{ scope.largeAmount }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item prop="earnings" label="市盈率" label-width="1.8rem" label-align="right">
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.earnings">{{ scope.earnings }}</div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <stock-list-item
            prop="totalMarketValue"
            label="总市值"
            label-width="2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.totalMarketValue">
                  {{ scope.totalMarketValue }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- <stock-list-item
            prop="industry"
            label="所属行业"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.industry">
                  {{ scope.industry }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item> -->
          <stock-list-item prop="status" label="状态" label-align="right" label-width="1.2rem">
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.status">
                  {{ scope.status }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
        </stock-list>
      </div>
    </div>
    <div v-else>
      <NoData />
    </div>
  </div>
</template>
<script>
import NoData from './NoData';
import { jumpTokline, compare } from '../../utils/index';
const ggzcId=2;
const jgccId=10;
const ybyxId=118;
const bmltId=108;
const xfltId=78;
const newXfltId=178;
const newRdldId=186;
const rdwjId=248;
const zlzzId=250;
const xfjjId=218;
const bdqzId=220;
const rdjjId=222;
const qljjId=230;
export default {
  name: 'TableProp',
  data() {
    return {
      isModelOne: [ggzcId, jgccId, ybyxId, bmltId, xfltId, newXfltId, newRdldId,xfjjId,bdqzId,rdjjId,qljjId,rdwjId,zlzzId].includes(Number(this.$route.query.gpc_id)),
      isModelTwo: [2072, 202].includes(Number(this.$route.query.gpc_id)),
    };
  },
  props: {
    detailTableData: {
      default: () => [],
      type: Array,
    },
  },
  components: {
    NoData,
  },
  methods: {
    // 根据子组件中传来的值，对所有数据排序
    watchHeadSort(arg1) {
      if (
        arg1.sortKey === 'stockCode' ||
        arg1.sortKey === 'industry' ||
        arg1.sortKey === 'status'
      ) {
        return;
      }
      if (arg1.sortKey === 'buyDate' || arg1.sortKey === 'addDate') {
        if (arg1.currentSortTag === 1) {
          this.detailTableData.sort(compare('buyDateSort'));
        } else if (arg1.currentSortTag === 2) {
          this.detailTableData.sort(compare('buyDateSort')).reverse();
        }
        return;
      }
      if (arg1.currentSortTag === 1) {
        this.detailTableData.sort(compare(arg1.sortKey));
      } else if (arg1.currentSortTag === 2) {
        this.detailTableData.sort(compare(arg1.sortKey)).reverse();
      }
    },
    //获取点击table的row 跳转k线
    watchClickRow(row) {
      jumpTokline(row.stockCode, row.market);
    },
  },
};
</script>

<style lang="less" scoped></style>
